<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body{
            background: #eeeeee;
        }
         .title{
            padding: 24px 0;
             float: left;
             background: #ffffff;
             width: 100%;
        }
        .title .l{
          float: left;
          border-left: 5px solid #53a0e4;
          padding-left: 10px;
        }
        .title .r{
          float: right;
            padding-right: 10px;
        }
        .table_l{
            width: 50%;
            float: left;
        }

        .describe{
          background: #ffffff;
          padding: 24px;
          border-bottom: 1px solid #cccccc;
        }
        .describe h1{
          font-size: 28px;
          margin-bottom: 12px;
        }
        .describe .info_item{
          margin-bottom: 10px;
        }
        .describe .info_item span:nth-child(1){
          color: #bbbbbb;
        }

        .result{
          background: #ffffff;
          padding: 20px;
        }
        .result li {
          float: left;
          width: 200px;
        }
        .result>li>span:nth-child(1){
          color: #aaaaaa;
        }
        .result>li>span:nth-child(3){
          font-size: 30px;
        }
        .result:after{
          display:block;
          clear:both;
          content:"";  
          visibility:hidden;
          height:0;
        }

    </style>

    <script src="../static/jquery-1.11.1.min.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/highstock.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/exporting.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/series-label.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="../static/layui/layui.js"></script>
</head>
<body>

<!--<form action="/" method="post">-->
<!--    <input type="text" name="search" placeholder="请输入sql查询语句">-->
<!--    <button>查询</button>-->
<!--</form>-->


<!--<form action="/upload" method="post" enctype="multipart/form-data">-->
<!--    <input type="file" name="file" value="上传">-->
<!--    <button>上传</button>-->
<!--</form>-->



<div class="layui-container">
  <div class="describe">
    <div>
      <h1>净利润与营业总收入之比
          net_profit_to_total_
          operate_revenue_ttm</h1>
      <div class="info_item">
        <span>因子类别：</span>
        <span>质量类因子</span>
      </div>
      <div class="info_item">
        <span>计算公式：</span>
        <span>净利润与营业总收入之比=净利润（TTM）/营业总收入（TTM）</span>
      </div>
      <div class="info_item">
        <span>更新时间：</span>
        <span>下一交易日早晨9:00前更新</span>
      </div>
      <div class="info_item">
        <span>数据处理：</span>
        <span>中位数去极值 -> 行业市值对数中性化 -> zscore标准化</span>
      </div>
      <div class="info_item">
        <span>默认参数：</span>
        <span>加权方式为按市值加权</span>
      </div>
    </div>
    <div>
      <form class="layui-form layui-form-pane" action="" method="post">
        <div class="layui-row">
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">组合构建：</label>
              <div class="layui-input-block">
                <select name="combination" lay-verify="required">
                  <option value="纯多头组合">纯多头组合</option>
                  <option value="1">多空组合I</option>
                  <option value="2">多空组合II</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">股池票：</label>
              <div class="layui-input-block">
                <select name="pool" lay-verify="required">
                  <option value="深沪300">深沪300</option>
                  <option value="1">中证500</option>
                  <option value="2">中证800</option>
                  <option value="3">中证1000</option>
                  <option value="4">中证全指</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">回测区间：</label>
              <div class="layui-input-block">
                <select name="interval" lay-verify="required">
                  <option value="近3个月">近3个月</option>
                  <option value="1">近1年</option>
                  <option value="2">近3年</option>
                  <option value="3">近10年</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" title="过滤涨停及停牌股:">过滤涨停及停牌股：</label>
              <div class="layui-input-block">
                <select name="dailylimit" lay-verify="required">
                  <option value="否">否</option>
                  <option value="1">是</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">调仓周期：</label>
              <div class="layui-input-block">
                <select name="adjustment" lay-verify="required" disabled>
                  <option value="1天">1天</option>
                  <option value="1">5天</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">调仓时间：</label>
              <div class="layui-input-block">
                <select name="adjustmenttime" lay-verify="required" disabled>
                  <option value="当天/15:00 15:00">当天/15:00 15:00</option>
                  <option value="1">当天/15:00 15:00</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" title="手续费及滑点:">手续费及滑点：</label>
              <div class="layui-input-block">
                <select name="cost" lay-verify="required">
                  <option value="无">无</option>
                  <option value="1">3‱佣金+1‰印花税+无滑点</option>
                  <option value="2">3‱佣金+1‰印花税+1‰滑点</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <button class="layui-btn" lay-button lay-filter="formDemo" type="button" style="padding: 0 120px;" onclick="FormSub()">确定</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  function FormSub(){
    var combination = $('select[name="combination"]').val();
    var pool = $('select[name="pool"]').val();
    var interval = $('select[name="interval"]').val();
    var dailylimit = $('select[name="dailylimit"]').val();
    var adjustment = $('select[name="adjustment"]').val();
    var adjustmenttime = $('select[name="adjustmenttime"]').val();
    var cost = $('select[name="cost"]').val();

    console.log(combination,pool,interval,dailylimit,adjustment,adjustmenttime,cost);

    



  }
</script>

<div class="layui-container">
  <div>
    <ul class="result">
      <li>
        <span>IC均值</span><br>
        <span>0.016</span>
      </li>
      <li>
        <span>|IC|>0.02的比率</span><br>
        <span>0.794</span>
      </li>
      <li>
        <span>R值</span><br>
        <span>0.229</span>
      </li>
    </ul>
  </div>
</div>


<div class="layui-container">
  <div class="table_factor">
    <table class="layui-table">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>累计收益</th>
          <th>年化收益</th>
          <th>超额年化收益</th>
          <th>基准年化收益</th>
          <th>最大回撤</th>
          <th>夏普比率</th>
          <th>换手率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>最小分位数</td>
          <td>-16.49%</td>
          <td>-6.02%</td>
          <td>-10.60%</td>
          <td>5.12%</td>
          <td>32.35%</td>
          <td>-0.44</td>
          <td>3.18%</td>
        </tr>
        <tr>
          <td>最小分位数</td>
          <td>8.47%</td>
          <td>2.84%</td>
          <td>-2.17%</td>
          <td>5.12%</td>
          <td>33.52%</td>
          <td>-0.06</td>
          <td>1.86%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


<div class="layui-container">
  <div class="graphical" id="container" style="min-width:400px;height:400px"></div>
</div>

<script>
  window.onload = function(){
    var chart = Highcharts.chart('container', {
		title: {
				text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
		},
		subtitle: {
				text: '数据来源：thesolarfoundation.com'
		},
		yAxis: {
				title: {
						text: '就业人数'
				}
		},
		legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
		},
		plotOptions: {
				series: {
						label: {
								connectorAllowed: false
						},
						pointStart: 2010
				}
		},
		series: [{
				name: '安装，实施人员',
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		}, {
				name: '工人',
				data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
		}, {
				name: '销售',
				data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
		}, {
				name: '项目开发',
				data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
		}, {
				name: '其他',
				data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
		}],
		responsive: {
				rules: [{
						condition: {
								maxWidth: 500
						},
						chartOptions: {
								legend: {
										layout: 'horizontal',
										align: 'center',
										verticalAlign: 'bottom'
								}
						}
				}]
		}
});
  }
</script>

<style>
  .item_list{
    width: 100%;
  }
  .item_list .list_li{
    width: 50%;
    float: left;
  }
</style>

<dir class="layui-container">
  <div class="item_list">
    <div class="list_li" id="list_li1"></div>
    <div class="list_li" id="list_li2"></div>
    <div class="list_li" id="list_li3"></div>
    <div class="list_li" id="list_li4"></div>
  </div>
  <div style="clear: both;"></div>
</dir>

<!-- 图表一 -->
<script>
function getData(n) {
  var arr = [],
      i,
      a,
      b,
      c,
      spike;
  for (i = 0; i < n; i = i + 1) {
      if (i % 100 === 0) {
          a = 2 * Math.random();
      }
      if (i % 1000 === 0) {
          b = 2 * Math.random();
      }
      if (i % 10000 === 0) {
          c = 2 * Math.random();
      }
      if (i % 50000 === 0) {
          spike = 10;
      } else {
          spike = 0;
      }
      arr.push([
          i,
          2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
      ]);
  }
  return arr;
}
var n = 100000,
    data = getData(n);
console.time('line');
Highcharts.chart('list_li1', {
    chart: {
        zoomType: 'x'
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Highcharts drawing ' + n + ' points'
    },
    subtitle: {
        text: 'Using the Boost module'
    },
    tooltip: {
        valueDecimals: 2
    },
    series: [{
        data: data,
        lineWidth: 0.5
    }]
});
console.timeEnd('line');
</script>

<!-- 图表二 -->
<script type="text/javascript">
Highcharts.chart('list_li2', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});
</script>

<!-- 图表三 -->
<script type="text/javascript">
  Highcharts.chart('list_li3', {
      chart: {
          type: 'scatter',
          zoomType: 'xy'
      },
      title: {
          text: 'Height Versus Weight of 507 Individuals by Gender'
      },
      subtitle: {
          text: 'Source: Heinz  2003'
      },
      xAxis: {
          title: {
              enabled: true,
              text: 'Height (cm)'
          },
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true
      },
      yAxis: {
          title: {
              text: 'Weight (kg)'
          }
      },
      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
          borderWidth: 1
      },
      plotOptions: {
          scatter: {
              marker: {
                  radius: 5,
                  states: {
                      hover: {
                          enabled: true,
                          lineColor: 'rgb(100,100,100)'
                      }
                  }
              },
              states: {
                  hover: {
                      marker: {
                          enabled: false
                      }
                  }
              },
              tooltip: {
                  headerFormat: '<b>{series.name}</b><br>',
                  pointFormat: '{point.x} cm, {point.y} kg'
              }
          }
      },
      series: [{
          name: 'Female',
          color: 'rgba(223, 83, 83, .5)',
          data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
              [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
              [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
              [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
              [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
              [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
              [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
              [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
              [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
              [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
              [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
              [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
              [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
              [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
              [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
              [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
              [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
              [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
              [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
              [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
              [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
              [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
              [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
              [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
              [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
              [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
              [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
              [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
              [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
              [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
              [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
              [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
              [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
              [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
              [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
              [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
              [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
              [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
              [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
              [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
              [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
              [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
              [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
              [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
              [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
              [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
              [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
              [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
              [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
              [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
              [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
              [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
  
      }, {
          name: 'Male',
          color: 'rgba(119, 152, 191, .5)',
          data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
              [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
              [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
              [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
              [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
              [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
              [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
              [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
              [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
              [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
              [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
              [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
              [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
              [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
              [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
              [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
              [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
              [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
              [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
              [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
              [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
              [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
              [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
              [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
              [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
              [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
              [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
              [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
              [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
              [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
              [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
              [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
              [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
              [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
              [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
              [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
              [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
              [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
              [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
              [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
              [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
              [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
              [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
              [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
              [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
              [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
              [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
              [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
              [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
              [180.3, 83.2], [180.3, 83.2]]
      }]
  });
</script>

<!-- 图标四 -->
<script type="text/javascript">
  Highcharts.chart('list_li4', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Monthly Average Rainfall'
      },
      subtitle: {
          text: 'Source: WorldClimate.com'
      },
      xAxis: {
          categories: [
              'Jan',
              'Feb',
              'Mar',
              'Apr',
              'May',
              'Jun',
              'Jul',
              'Aug',
              'Sep',
              'Oct',
              'Nov',
              'Dec'
          ],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Rainfall (mm)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.2,
              borderWidth: 0
          }
      },
      series: [{
          name: 'Tokyo',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  
      }, {
          name: 'New York',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  
      }, {
          name: 'London',
          data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  
      }, {
          name: 'Berlin',
          data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  
      }]
  });
</script>

<!-- 底部数据列表 -->
<div class="layui-container">
    <div class="table_l">
        <div class="title">
            <span class="l">
              因子值最大的20只股票
            </span>
            <span class="r">
              <i id="test1"></i>更新
            </span>
            <div style="clear: both;"></div>
        </div>
         <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>stockcode</th>
                <th>alpha</th>
              </tr>
            </thead>
            <tbody class="list">
                {% for i in table_data %}
                    <tr>
                        <td>{{ i[1] }}</td>
                        <td>{{ i[2] }}</td>
                    </tr>
                {% endfor %}
            </tbody>
          </table>
    </div>
    <div class="table_l">
            <div class="title">
                <span class="l">
                    因子值最大的20只股票
                </span>
                <span class="r">
                    <i id="test2"></i>更新
                </span>
                <div style="clear: both;"></div>
            </div>
          <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>stockcode</th>
                <th>alpha</th>
              </tr>
            </thead>
            <tbody class="list1">
                {% for i in table_data %}
                    <tr>
                        <td>{{ i[1] }}</td>
                        <td>{{ i[2] }}</td>
                    </tr>
                {% endfor %}
            </tbody>
          </table>
    </div>
</div>
</body>
<script>
layui.use(['util'],function(){
  var layer = layui.layer,
      util = layui.util,
      laydate = layui.laydate;
  //日期
  laydate.render({
    elem: '#test1',
      value: new Date('2015-01-05'),
      isInitValue: true,
      done:function (value) {
          let time= value.split('-').join('');
          let _html = '';
          var datas = [
            [1.0,-0.025926411151885986],
            [2.0,0.03932669758796692],
            [4.0,0.050769731402397156],
            [6.0,0.05038885027170181],
            [7.0,0.08241895586252213],
            [11.0,0.057410649955272675],
            [12.0,0.025495171546936035],
            [14.0,0.06770805269479752],
            [16.0,0.07323523610830307],
            [17.0,0.05633731186389923]
          ];
            for (var i = 0; i< datas.length; i++){
                _html += '<tr><td>'+datas[i][0]+'</td><td>'+datas[i][1]+'</td></tr>';
            }

        $('.list').html(_html);
        // console.log(list)
      }
  });

  laydate.render({
    elem: '#test2',
    value: new Date(),
    isInitValue: true,
    done:function (value) {
          let time= value.split('-').join('');
          let _html = '';
          var datas = [
            [1.0,-0.025926411151885986],
            [2.0,0.03932669758796692],
            [4.0,0.050769731402397156],
            [6.0,0.05038885027170181],
            [7.0,0.08241895586252213],
            [11.0,0.057410649955272675],
            [12.0,0.025495171546936035],
            [14.0,0.06770805269479752],
            [16.0,0.07323523610830307],
            [17.0,0.05633731186389923]
          ];
            for (var i = 0; i< datas.length; i++){
                _html += '<tr><td>'+datas[i][0]+'</td><td>'+datas[i][1]+'</td></tr>';
            }

        $('.list1').html(_html);
        // console.log(list)
     
      }
  });

    //返回顶部
    util.fixbar({
      bar1: false
      ,bar2: false
      ,css: {right: 50, bottom: 100}
      ,bgcolor: '#009688'
    });



    // 初始化
    let _html = '';
    var datas = [
      [1.0,-0.025926411151885986],
      [2.0,0.03932669758796692],
      [4.0,0.050769731402397156],
      [6.0,0.05038885027170181],
      [7.0,0.08241895586252213],
      [11.0,0.057410649955272675],
      [12.0,0.025495171546936035],
      [14.0,0.06770805269479752],
      [16.0,0.07323523610830307],
      [17.0,0.05633731186389923]
    ];
    for (var i = 0; i< datas.length; i++){
        _html += '<tr><td>'+datas[i][0]+'</td><td>'+datas[i][1]+'</td></tr>';
    }

    $('.list').html(_html);
    $('.list1').html(_html);
    // console.log(list)





});
</script>
</html>